<template>
  <div class="amap-page-container">
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events">
      <el-amap-marker v-for="(marker) in markers" :position="marker.position" :content="marker.content"
                      :events="marker.events" :key="marker.position[0]"></el-amap-marker>
    </el-amap>
  </div>
</template>

<style>
  .amap-page-container {
    height: 800px
  }

  .amap-demo {
    height: 100%
  }
</style>


<script>
  export default {
    data: function() {
      const self = this
      return {
        zoom: 12,
        center: [121.59996, 31.197646],
        markers: [],
        markerRefs: [],
        events: {
          init(o) {
            setTimeout(() => {
              console.log(self.markerRefs)
              const cluster = new AMap.MarkerClusterer(o, self.markerRefs, {
                gridSize: 80,
                renderCluserMarker: self._renderCluserMarker
              })
              console.log(cluster)
            }, 1000)
          }
        }
      }
    },

    created() {
      const self = this
      const markers = []
      let index = 0

      const basePosition = [121.59996, 31.197646]

      while (++index <= 30) {
        markers.push({
          position: [basePosition[0] + 0.01 * index, basePosition[1]],
          content: '<div style="text-align:center background-color: hsla(180, 100%, 50%, 0.7) height: 24px width: 24px border: 1px solid hsl(180, 100%, 40%) border-radius: 12px box-shadow: hsl(180, 100%, 50%) 0px 0px 1px"></div>',
          events: {
            init(o) {
              self.markerRefs.push(o)
            }
          }
        })
      }

      this.markers = markers
    },

    methods: {
      _renderCluserMarker(context) {
        const count = this.markers.length
        const factor = Math.pow(context.count / count, 1 / 18)
        const div = document.createElement('div')
        const Hue = 180 - factor * 180
        const bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
        const fontColor = 'hsla(' + Hue + ',100%,20%,1)'
        const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
        const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
        div.style.backgroundColor = bgColor
        const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
        div.style.width = div.style.height = size + 'px'
        div.style.border = 'solid 1px ' + borderColor
        div.style.borderRadius = size / 2 + 'px'
        div.style.boxShadow = '0 0 1px ' + shadowColor
        div.innerHTML = context.count
        div.style.lineHeight = size + 'px'
        div.style.color = fontColor
        div.style.fontSize = '14px'
        div.style.textAlign = 'center'
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
        context.marker.setContent(div)
      }
    }
  }
</script>
